<div th:fragment="register">
    <!--    注册modal-->
    <style>
        .r_label {
            width: 80px;
            display: inline-block;
        }

        input.mszc {
            background: #0e82e8;
            color: #fff;
            border: none;
            padding: 10px 0;
            border-radius: 5px;
            width: 10%;
        }

        input.mszc1 {
            background: #0e82e8;
            color: #fff;
            border: none;
            padding: 2px 0;
            border-radius: 2px;
            width: 10%;
        }

        .page-zchy div {
            line-height: 35px;
        }
    </style>
    <div class="m-modal" id="registerModal">
        <div class="m-modal-dialog">
            <div class="m-top">
                <h4 class="m-modal-title">
                    注册
                </h4>
                <span class="m-modal-close">&times;</span>
            </div>
            <div class="m-middle">
                <!--                <iframe th:src="@{/cmsEnglish/register.html}"></iframe>-->
                <div class="page-zchy">
                    <form id="registerForm" method="post">
                        <!--                        <h2 class="page-title">用户注册</h2>-->
                        <!--                        <ul>-->

                        <div>
                            <span class="r_label">手机号码：</span>
                            <span>
                                   <input name="mobile" type="text" id="mobile" value="15267164682" maxlength="30"
                                          placeholder="手机号码">（必填）
                                </span>
                        </div>
                        <div>
                            <span class="r_label">验证码：</span>
                            <span>
                                    <input name="checkCode" type="text" id="checkCode" maxlength="50" placeholder="验证码"
                                           style="">
                                    <input type="button" id="btnSendCheckCode" value="发送" class="mszc1"
                                           style="">
                                </span>
                            <!--                                <img src="" id="imgCheckCode" style="width:110px;height:30px;float:right;padding:5px 3px">-->
                        </div>

                        <div>
                            <span class="r_label">密码：</span>
                            <span>
                                   <input name="pwd" type="password" id="pwd" maxlength="20" placeholder="密码">（必填）
                                </span>
                        </div>
                        <div>
                            <span class="r_label">确认密码：</span>
                            <span>
                                   <input name="pwd2" type="password" id="pwd2" maxlength="20" placeholder="确认密码">（必填）
                                </span>
                        </div>
                        <div>
                            <span class="r_label">邮箱：</span>
                            <span>
                                   <input name="email" type="text" id="email" maxlength="50" placeholder="邮箱">（选填）
                                </span>
                        </div>

                        <div style="padding-top: 20px">
                            <input type="button" id="btnRegister" value="注册" class="mszc">
                        </div>


                        <!--                        </ul>-->
                    </form>
                </div>
            </div>
            <!--                  <div class="m-bottom">-->
            <!--                      <button class="m-btn-sure">确定</button>-->
            <!--                      <button class="m-btn-cancel">取消</button>-->
            <!--                  </div>-->
        </div>
    </div>
    <!--          <button class="btn1">点击我，打开</button>-->
    <script type="text/javascript" th:src="@{/blog/js/jquery.my-modal.1.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/blog/js/md5.js}"></script>
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script>-->
    <script>
        var registerModal = new MyModal.modal(function () {
            // alert("你点击了确定");
        },{"id":'registerModal'});
        // loginModal.id = "registerModal";
        // m1.show();
        $('.btn1').on("click", function () {
            // var str='<li ondblclick="jumpToTime(this)" data="1000" style="background: white;"><i></i>\n' +
            //     '  <span>00:00:01.0</span>\n' +
            //     '    <a onclick="correctSubtitle(this)" data="489" class="inputsub-subtitle">纠正</a>\n' +
            //     '    <a onclick="setSubtitlePracticeLevel(this)" data="489" class="inputsub-subtitle-practice">难度</a>\n' +
            //     '    <a onclick="subtitleCollect(this)" data="489" class="inputsub-subtitle-collect">未收藏</a>\n' +
            //     '    <p><a href="javascript:void(0)">中文：好吧 我怎么会这样？</a></p>\n' +
            //     '    <p> 英文： \n' +
            //     '    <a type="en" word="Okay" specialchar="false" href="javascript:void(0)" onclick="showWordDictModal(this)" style="background: aliceblue;">Okay </a> \n' +
            //     '    </p>\n' +
            //     '</li>';
            // $("#subtitleBlock").append(str);

        });

        function openRegister() {
            registerModal.show();
        }

        $(document).ready(function () {
            var deviceId = new Date().getTime();
            //图形验证码
            // initImgCheckCode(deviceId);

            $("#btnRegister").click(function () {
                var formParam = $("#registerForm").serializeArray()
                    .reduce(function (json, {name, value}) {
                        json[name] = value;
                        return json;
                    }, {});
                ;

                //校验
                formParam['deviceId'] = deviceId;
                formParam['registerType'] = 0;
                if (formParam.pwd != formParam.pwd2) {
                    alert("两次密码必须一样");
                    return;
                }
                // formParam['pwd'] = md5(formParam['pwd']);
                formParam['pwd'] = (CryptoJS.MD5(formParam['pwd']) + "").toUpperCase();
                // var newParam = {accountNo:'1',pwd:1,email:'1'};

                $.ajax({
                    type: "POST",
                    url: "/user/c/register",
                    dataType: 'JSON',
                    contentType: 'application/json',
                    data: JSON.stringify(formParam),
                    success: function (result) {
                        if (result.success) {
                            //设置cookie
                            // var token = result.data.token;
                            alert(result.message || '注册成功');
                            window.location = "/cmsEnglish/index.html";
                        } else {
                            alert(result.message || '注册失败');
                        }

                    }
                });

                // $.post("/user/c/register",JSON.stringify(formParam),function(result){
                //     if(result.success){
                //         //设置cookie
                //         // var token = result.data.token;
                //         alert("注册成功");
                //         window.location = "/cmsEnglish/index.html";
                //     }else{
                //         alert(result.message || '注册失败');
                //     }
                // },"json");
            });

            $("#imgCheckCode").click(function () {
                initImgCheckCode(deviceId);
            });
            $("#btnSendCheckCode").click(function () {
                var formParam = $("#registerForm").serializeArray()
                    .reduce(function (json, {name, value}) {
                        json[name] = value;
                        return json;
                    }, {});
                ;

                //校验
                var param = {"mobile": formParam['mobile'], "checkCodeType": 0};
                $("#btnSendCheckCode").prop('disabled', 'disabled');
                $.ajax({
                    type: "GET",
                    url: "/user/c/getSmsCode",
                    dataType: 'JSON',
                    contentType: 'application/json',
                    data: param,
                    success: function (result) {
                        if (result.success) {
                            //设置cookie
                            // var token = result.data.token;
                            alert("验证码已发送");
                        } else {
                            alert(result.message || '验证码发送失败');
                        }
                    },
                    complete: function (jqXHR, textStatus) {
                        // console.log("complete ...");
                        setTimeout(checkCodeWaitTimeCall, 1);
                    }
                });
            });
        });

        var checkCodeWaitTime = 60;

        function checkCodeWaitTimeCall() {
            $("#btnSendCheckCode").val("还剩" + checkCodeWaitTime + "秒");
            checkCodeWaitTime--;
            if (checkCodeWaitTime <= 0) {
                checkCodeWaitTime = 60;
                $("#btnSendCheckCode").val("发送");
                $("#btnSendCheckCode").prop('disabled', false);
            } else {
                setTimeout(checkCodeWaitTimeCall, 1000);
            }
        }
    </script>
</div>

</div>
